<template>
  <div class="sale-detail">
    <a-form-model :model="form" v-bind="layout" ref="form">
      <a-form-model-item label="商品售价" prop="price" required>
        <a-input-number
          v-model="form.price"
          :min="0"
          :formatter="
            (value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          "
          :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')"
        />
      </a-form-model-item>
      <a-form-model-item label="商品折扣价" prop="price_off">
        <a-input-number
          v-model="form.price_off"
          :min="0"
          :formatter="
            (value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          "
          :parser="parser"
        />
      </a-form-model-item>
      <a-form-model-item label="商品库存" prop="inventory" required>
        <a-input-number v-model="form.inventory" :min="0" :max="9999" />
      </a-form-model-item>
      <a-form-model-item label="计量单位" prop="unit" required>
        <a-input v-model="form.unit" />
      </a-form-model-item>
      <a-form-model-item label="商品相册" prop="images">
        <a-upload
          :action="
            'https://mallapi.duyiedu.com/upload/images?appkey=' +
            $store.state.userInfo.appkey
          "
          name="avatar"
          list-type="picture-card"
          @preview="handlePreview"
          @change="handleChange"
        >
          <div v-if="fileList.length < 8">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-modal
          :visible="previewVisible"
          :footer="null"
          @cancel="handleCancel"
        >
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  data() {
    return {
      form: {
        price: 0,
        price_off: null,
        inventory: 0,
        unit: '',
        images: [],
      },
      fileList: [],
      previewVisible: false,
      previewImage: '',
      layout: {
        labelCol: { span: 4, offset: 2 },
        wrapperCol: { span: 12 },
      },
    };
  },
  methods: {
    parser(value) {
      const val = value.replace(/\￥\s?|(,*)/g, '');
      if (val === '') return null;
      return val;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(f) {
      const file = f;
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      this.form.images = fileList.filter((f) => f.status === 'done');
    },
    validate(fn) {
      this.$refs.form.validate(fn);
    },
    init(data) {
      const { price, price_off, inventory, unit, images } = data;
      this.form = { price, price_off, inventory, unit, images };
      this.fileList = images.map((item, index) => ({
        uid: index,
        name: `image-${index}.png`,
        status: 'done',
        url: item,
      }));
    },
    reset() {
      this.$refs.form.resetFields();
      this.fileList = [];
    },
  },
};
</script>

<style lang="less" scoped>
.sale-detail {
  width: 800px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
